
<template>
      <el-row class="warp">
          <el-col class="publicNav" :span="3" style="height:100%;">
             <router-link class="newnava" :to="{'path':''}">图表管理</router-link>
          </el-col>
          <el-col :span="21" style="height:100%;" class="chart-test">
            <div class="main-contents-box">
              <div class="main-contents-main">
                  <el-row :span="24">
                    <div class="chart-warp" style="">
                      <ul>
                          <li class="chart-warp-li">
                                  <div class="chart-box">
                                      <span>传感器类型</span>
                                      <el-select size="mini" v-model="sensorid" placeholder="请选择" @change="get_devicelist">
                                        <el-option
                                          v-for="item in sensorList"
                                          :key="item.sensorid"
                                          :label="item.sensorname"
                                          :value="item.sensorid">
                                        </el-option>
                                      </el-select>
                                  </div>
                            </li>
                            <li  class="chart-warp-li">
                                    <div class="chart-box">
                                        <span>设备名称</span>
                                        <el-select size="mini" v-model="deviceid" placeholder="请选择" @change="get_dataid">
                                          <el-option
                                            v-for="item in deviceList"
                                            :key="item.deviceid"
                                            :label="item.devicename"
                                            :value="item.deviceid">
                                          </el-option>
                                        </el-select>
                                    </div>
                            </li>
                            <li  class="chart-warp-li">
                                    <div class="chart-box">
                                        <span>传感器属性</span>
                                        <el-select size="mini" v-model="dataid" placeholder="请选择" >
                                          <el-option
                                            v-for="item in dataidList"
                                            :key="item.dataid"
                                            :label="item.attrname"
                                            :value="item.dataid">
                                          </el-option>
                                        </el-select>
                                    </div>
                            </li>
                            <li class="chart-warp-li active-li" >
                                    <div class="chart-box" style="width:250px;margin:auto">
                                      <span>时间</span>
                                        <el-select size="mini" v-model="timetype" placeholder="请选择" style="width:100px;">
                                          <el-option
                                            v-for="item in timeList"
                                            :key="item.type"
                                            :label="item.value"
                                            :value="item.type">
                                          </el-option>
                                        </el-select>
                                          <el-button type="primary" @click="chartSearch" size="mini" icon="el-icon-zoom-in">查询</el-button>
                                    </div>
                            </li>
                     </ul>
                    </div>
                  </el-row>
                  <el-row :span="24">
                    <div class="chart-content">
                      <div id="myChart"></div>
                      </div>
                  </el-row>
                </div>
            </div>
          </el-col>
      </el-row>
</template>
<script>
import {get_chart_sensorlist,get_attr1,get_unit_list} from '../js/public.js';
export default {
  name: 'Chart',
  data () {
    return {
        sensorList: [/*{
          value: '温湿度传感器',
        }, {
          value: '烟感传感器',
        }, {
          value: '水侵传感器',
        }, {
          value: '门磁传感器',
        }*/],
        deviceList: [/*{
          value: '温湿度传感器1',
        }, {
          value: '温湿度传感器2',
        }, {
          value: '温湿度传感器12',
        }, {
          value: '温湿度传感器13',
        }*/],
        dataidList: [/*{
          value: '温度',
        }, {
          value: '湿度',
        }, {
          value: '温湿度',
        }*/],
        timeList: [{
          type:1,
          value: '近24小时',
        }, {
          type:2,
          value: '近7天',
        }, {
          type:3,
          value: '近30天',
        },{
          type:4,
          value: '近90天',
        }],
        optionss: [],
        sensorid: '',
        deviceid:'',
        dataid:'',
        timetype:''
     }
  },
  methods:{
      get_pwd(){
          let  pwd; 
          $.ajax({
              url:'../cfg/password.json',
              type:'GET',
              cache:false,
              async: false,
              dataType:'text',
              success:function(result){
                  let data = eval("("+result+")");
                  pwd = data.password;
              },
              error:function(realdata){                           
              }
          })
          return pwd;
      },
      check_pwd(){
          let username = window.sessionStorage.getItem('username');
          let password = window.sessionStorage.getItem('password');
          let pwd = this.get_pwd();
          if(username == "admin"){
              if(password != pwd){
                  this.$message({
                      message: '密码做了更改,请重新登录!',
                      type: 'info',
                      center:true,
                      showClose: true
                  });
                  this.loginout();
              }
          } 
      },
      loginout(){
          window.sessionStorage.removeItem("username");
          window.sessionStorage.removeItem("password");
          
          this.set_log("用户退出");
          this.$router.push("/login");
      },
      set_log(str){//用户操作日志
          let  msg= {"cmd":"CGI_LOG_SET_OPT","content":str};
          $.ajax({
              url:"cgi-bin/main.cgi",
              contentType: "application/json;charset=utf-8",
              type:"post",
              data:JSON.stringify(msg),
              success:function(msg){           
              }
          })
      },
      get_sensorlist(){//获取chart传感器
        let that = this;
        let msg = {"cmd":"CGI_CHART_GET_SENSORIDLIST"};
        if(window.sessionStorage.getItem('username')=="zyl"){
            $.ajax({
                url:"../static/get_chart_sensorlist.json",
                contentType: "application/json;charset=utf-8",
                type:"get",
                dataType:'text',
                cache:false,
                async: false,
                success:function(msg){
                    let data = eval("("+msg+")");
                    let sensor_arr = new Array();
                    $.each(data,function(i,value){
                        let sensor_info = {"sensorid":value,"sensorname":get_chart_sensorlist(value)};
                        sensor_arr.push(sensor_info);
                    })
                    that.$data.sensorList = sensor_arr;      
                },
                error:function(XMLHttpRequest,textStatus,errorThrown){
                }
            });

        }else{
            $.ajax({
                url:"cgi-bin/main.cgi",
                contentType: "application/json;charset=utf-8",
                type:"post",
                cache:false,
                async: false,
                data:JSON.stringify(msg),
                success:function(msg){
                    let data = eval("("+msg+")");
                    let sensor_arr = new Array();
                    $.each(data,function(i,value){
                        let sensor_info = {"sensorid":value,"sensorname":get_chart_sensorlist(value)};
                        sensor_arr.push(sensor_info);
                    })
                    that.$data.sensorList = sensor_arr;      
                },
                error:function(XMLHttpRequest,textStatus,errorThrown){
                }
            });
        }
    },
    get_devicelist(){
      let that = this;
      let msg = {"cmd":"CGI_CHART_GET_DEVICEIDLIST","sensorid":this.$data.sensorid};
      if(window.sessionStorage.getItem('username')=="zyl"){
          $.ajax({
              url:"../static/get_chart_devicelist.json",
              contentType: "application/json;charset=utf-8",
              type:"get",
              dataType:'text',
              cache:false,
              async: false,
              success:function(msg){ 
                  that.$data.deviceid = '';
                  that.$data.dataid = '';
                  that.$data.timetype="";

                  let data = eval("("+msg+")");
                  let device_arr = new Array();

                  $.each(data,function(i,val){
                      let device_info = {"deviceid":val.deviceid,"devicename":val.devicename};
                      device_arr.push(device_info);
                  })
                  that.$data.deviceList = device_arr;               
              },
              error:function(XMLHttpRequest,textStatus,errorThrown){
              }
          });
      }else{
          $.ajax({
              url:"cgi-bin/main.cgi",
              contentType: "application/json;charset=utf-8",
              type:"post",
              cache:false,
              async: false,
              data:JSON.stringify(msg),
              success:function(msg){ 
                  that.$data.deviceid = '';
                  that.$data.dataid = '';
                  that.$data.timetype="";

                  let data = eval("("+msg+")");
                  let device_arr = new Array();

                  $.each(data,function(i,val){
                      let device_info = {"deviceid":val.deviceid,"devicename":val.devicename};
                      device_arr.push(device_info);
                  })
                  that.$data.deviceList = device_arr;               
              },
              error:function(XMLHttpRequest,textStatus,errorThrown){
              }
          });
      }
    },
    get_dataid(){
      let that = this;
      let msg = {"cmd":"CGI_CHART_GET_DEVICEDATAID","deviceid":this.$data.deviceid};


      if(window.sessionStorage.getItem('username')=="zyl"){
          $.ajax({
              url:"../static/get_chart_attr.json",
              contentType: "application/json;charset=utf-8",
              type:"get",
              dataType:'text',
              cache:false,
              async: false,
              success:function(msg){
                  that.$data.dataid = '';
                  that.$data.timetype = '';

                  let data = eval("("+msg+")");
                  let dataid_arr = new Array();
                  $.each(data,function(i,val){
                      if(val == 65537 || val == 65538 || val == 131079 || val == 327681 || val == 327682 || val == 327683 || val == 327684 || val == 327685 || val == 327686){
                          let dataid_info = {"dataid":val,"attrname":get_attr1(val)};
                          dataid_arr.push(dataid_info);  
                      } 
                  })
                 
                  that.$data.dataidList = dataid_arr; 
              },
              error:function(XMLHttpRequest,textStatus,errorThrown){
              }
          });
      }else{
          $.ajax({
              url:"cgi-bin/main.cgi",
              contentType: "application/json;charset=utf-8",
              type:"post",
              cache:false,
              async: false,
              data:JSON.stringify(msg),
              success:function(msg){
                  that.$data.dataid = '';
                  that.$data.timetype = '';
                  
                  let data = eval("("+msg+")");
                  let dataid_arr = new Array();
                  $.each(data,function(i,val){
                      if(val == 65537 || val == 65538 || val == 131079 || val == 327681 || val == 327682 || val == 327683 || val == 327684 || val == 327685 || val == 327686){
                          let dataid_info = {"dataid":val,"attrname":get_attr1(val)};
                          dataid_arr.push(dataid_info);  
                      } 
                  })
                 
                  that.$data.dataidList = dataid_arr; 
              },
              error:function(XMLHttpRequest,textStatus,errorThrown){
              }
          });
      }

      
    },
    chartSearch(){
          let that = this;
          if(this.$data.sensorid == ""){
              this.$message({
                  message: '查询错误,请您指定传感器类型!',
                  type: 'error',
                  center:true,
                  showClose: true
                });
              return false;
          }

          if(this.$data.deviceid == ""){
              this.$message({
                  message: '查询错误,请您指定设备名称!',
                  type: 'error',
                  center:true,
                  showClose: true
                });
              return false;
          }

          if(this.$data.dataid == ""){
              this.$message({
                  message: '查询错误,请您指定传感器属性!',
                  type: 'error',
                  center:true,
                  showClose: true
                });
              return false;
          }

          if(this.$data.timetype == ""){
              this.$message({
                  message: '查询错误,请您指定时间!',
                  type: 'error',
                  center:true,
                  showClose: true
                });
              return false;
          }

          //将选中的传感器属性存储到数组中
          let dataid_arr = new Array();
          dataid_arr.push(this.$data.dataid);

          let msg = {"cmd":"CGI_CHART_GET_DATA","deviceid":this.$data.deviceid,
  "dataid":dataid_arr,"time":this.$data.timetype}

          if(window.sessionStorage.getItem('username')=="zyl"){
              $.ajax({
                  url:'../static/get_chart_data.json',
                  type:'GET',
                  cache:false,
                  async: false,
                  dataType:'text',
                  success:function(result){
                      let data = eval("("+result+")");
                      let time_arr = new Array();
                      let data_arr = new Array();
                      let dataid,title,y_axis,max_num,min_num,series_name
                      //遍历所选取的传感器属性
                      $.each(dataid_arr,function(i,value){
                           //用于获取图标中提示字段
                           dataid = value; 
                          //整合选取传感器属性的数据
                          $.each(data[value],function(i,val){
                            time_arr.push(val.time);
                            data_arr.push(val.data.toFixed(2));
                          })
                      })

                      title = get_attr1(dataid);   
                      if(dataid == 65537){
                           y_axis = title + get_unit_list(65537);
                           max_num = 100;
                           min_num = -20;
                      }

                      if(dataid == 65538){
                           y_axis = title + get_unit_list(65538);
                           max_num = 100;
                           min_num = 0;
                      }

                      if(dataid == 131079){
                           y_axis = title + get_unit_list(131079);
                           max_num = 100;
                           min_num = -20;
                      }

                      if(dataid == 327681){
                           y_axis = title + get_unit_list(327681);
                           max_num = 240;
                           min_num = 200;
                      }

                      if(dataid == 327682){
                           y_axis = title + get_unit_list(327682);
                           max_num = 240;
                           min_num = 200;
                      }

                      if(dataid == 327683){
                           y_axis = title + get_unit_list(327683);
                           max_num = 240;
                           min_num = 200;
                      }

                      if(dataid == 327684){
                           y_axis = title + get_unit_list(327684);
                           max_num = 50;
                           min_num = 0;
                      }

                      if(dataid == 327685){
                           y_axis = title + get_unit_list(327685);
                           max_num = 50;
                           min_num = 0;
                      }

                      if(dataid == 327686){
                           y_axis = title + get_unit_list(327686);
                           max_num = 50;
                           min_num = 0;
                      }

                      that.drawLine(title,time_arr,data_arr,y_axis,max_num,min_num)            
                  },
                  error:function(realdata){
                  }
              })
          }else{

            $.ajax({
                  url:'cgi-bin/main.cgi',
                  type:'post',
                  cache:false,
                  async: false,
                  data:JSON.stringify(msg),
                  success:function(result){
                      let data = eval("("+result+")");
                      let time_arr = new Array();
                      let data_arr = new Array();
                      let dataid,title,y_axis,max_num,min_num,series_name
                      //遍历所选取的传感器属性
                      $.each(dataid_arr,function(i,value){
                           //用于获取图标中提示字段
                           dataid = value; 
                          //整合选取传感器属性的数据
                          $.each(data[value],function(i,val){
                            //console.log(val);
                            //console.log(val);
                            //console.log(typeof(val.data));
                            time_arr.push(val.time);
                            data_arr.push(val.data.toFixed(2));
                          })
                      })

                      title = get_attr1(dataid);   
                      if(dataid == 65537){
                           y_axis = title + get_unit_list(65537);
                           max_num = 100;
                           min_num = -20;
                      }

                      if(dataid == 65538){
                           y_axis = title + get_unit_list(65538);
                           max_num = 100;
                           min_num = 0;
                      }

                      if(dataid == 131079){
                           y_axis = title + get_unit_list(131079);
                           max_num = 100;
                           min_num = -20;
                      }

                      if(dataid == 327681){
                           y_axis = title + get_unit_list(327681);
                           max_num = 240;
                           min_num = 200;
                      }

                      if(dataid == 327682){
                           y_axis = title + get_unit_list(327682);
                           max_num = 240;
                           min_num = 200;
                      }

                      if(dataid == 327683){
                           y_axis = title + get_unit_list(327683);
                           max_num = 240;
                           min_num = 200;
                      }

                      if(dataid == 327684){
                           y_axis = title + get_unit_list(327684);
                           max_num = 50;
                           min_num = 0;
                      }

                      if(dataid == 327685){
                           y_axis = title + get_unit_list(327685);
                           max_num = 50;
                           min_num = 0;
                      }

                      if(dataid == 327686){
                           y_axis = title + get_unit_list(327686);
                           max_num = 50;
                           min_num = 0;
                      }

                      that.drawLine(title,time_arr,data_arr,y_axis,max_num,min_num)            
                  },
                  error:function(realdata){
                  }
              })
          }
    },
    drawLine(attr,x_data,series_data,y_axis,max_num,min_num){
    //attr  温度 
    //x_data  横坐标数据
    //series_data  图形数据
    //y_axis  纵坐标名称  '温度(单位: ℃)'
    //max_num 最大数值
    //min_num 最小数值
    

        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
            legend:{
            textStyle:{
                color:'#333',
                fontSize:'25',
            },
            data:[
                {
                    name:attr,
                    textStyle:{
                        color:'#000'
                    }
                },
            ],
        },
        dataZoom: [
            {
                type: 'slider',//滑条组件
                show: true,
                xAxisIndex: [0],
                start:10,
                end: 90
            },
            {
                type: 'inside',//缩放组件
                xAxisIndex: [0],
                start: 10,
                end: 90
            }
        ],
        tooltip: {//提示框组件
            trigger: 'axis',//触发类型item主要是散点图、饼、axis主要为条、折
            axisPointer: {//是配置坐标轴指示器的快捷方式。实际上坐标轴指示器的全部功能，都可以通过轴上的 axisPointer 配置项完成（例如 xAxis.axisPointer 或 angleAxis.axisPointer）。但是使用 tooltip.axisPinter 在简单场景下会更方便一些。
                type: 'cross',//line' 直线指示器'shadow' 阴影指示器'cross' 十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。
                label: {//坐标轴指示器的文本标签。
                    backgroundColor: '#6a7985'
                }
            }
        },
         toolbox: {//工具盒子
            show: true,//是否显示
            feature: {//设置里边参数
                 dataZoom: {//缩放
                 },
                dataView: {readOnly: false},//数据视图
                // magicType: {type: ['line',]},//图标类型切换
                // restore: {},//配置还原
                saveAsImage: {}//保存为图片
            },
            right:0,//右边
            top:-5
        },
        //X轴设置
        xAxis:{
            data:x_data,
            //data:['2017/8/12','2017/8/13','2017/8/14','2017/8/15','2017/8/16','2017/8/17','2017/8/18','2017/8/19','2017/8/20','2017/8/21','2017/8/22','2017/8/23','2017/8/24','2017/8/25','2017/8/26'],
       },
        //y轴设置
         yAxis: [
            {
                type: 'value',//类型
                scale: true,//形状
                name: y_axis,//名称
                max: max_num,//最大数
                min: min_num,//最小数
                axisLabel: {//设置刻度格式刻度标签的内容格式器，支持字符串模板和回调函数两种形式。
                    formatter: '{value}'
                }
            },
        ],
        series:[
            {
                name:attr,
                type:'line',
                data:series_data,
               //data:['15','20','25','27','28','30','35','40','45','50','22','60','70','80','15'],
                markPoint: {//图表标注。
                    data: [
                        {type: 'max', name: '最大值'},//最大值
                        {type: 'min', name: '最小值'}//最小值
                    ]
                },
                markLine: {//图表标线.
                    data: [
                        {type: 'average', name: '平均值'}//平均值
                    ]
                }
            },
        ]
        });
    },
    initials(){
      if($(".chart-test").width()<1000){
            $(".chart-warp").width("800px");
            $(".chart-warp ul .chart-warp-li").width("33.3%");
            $(".chart-warp ul .active-li").css({"width":"49%","margin-top":"10px"});
        }else{
            $(".chart-warp").width("1000px");
            $(".chart-warp ul .chart-warp-li").width("25%");
            $(".chart-warp ul .active-li").css({"margin-top":"0px"});
        }
    }
  },
  mounted(){
      this.check_pwd();
      //this.drawLine();
      this.get_sensorlist();
      this.initials();
  },
  created(){
      let that=this;
      window.onresize=window.onload= function(){
        that.initials();
      }
  }
}
</script>
<style>
.chart-warp ul{
  width: 100%;
  height: auto;
  overflow: hidden;
}
.chart-warp ul  .chart-warp-li{
  width: 25%;
  float: left;
}
.chart-box{
  width:220px;
  margin:auto;

}
.chart-box .el-select{
  width: 120px;
  margin-left: 10px;
}
.chart-warp{
  width:1000px;
  height:auto;
  margin: auto;
  margin-top: 30px;
  overflow: hidden;
}
.chart-content{
  width:80%;
  height:500px;
  margin:auto;
  margin-top: 30px;
}
#myChart{
  width: 100%;
  height: 100%;
}
.chart-search{
  float:left;
  margin-left:10px;
}
.chart-search .el-button{
  float: left;
}
</style>
